<template>

    <div class="head">
        <div>

            <div class="logo">
                <img @click="$router.push('/')" src="../assets/img/head-logo.png" alt="">
            </div>
        </div>
        <div>
            <div class="lang">
                <img src="../assets/img/lang.png" alt="">
            </div>
            <div class="address">
                {{ disPlayAddress(account,4,4) }}
            </div>
        </div>
      </div>

</template>

<script>
import {mixins} from "@/mixin";
export default {
    mixins:[mixins],
    data() {
        return {
            show: false,
            list: [
                {
                    label: this.$t('Home'),
                    url: '/'
                }, {
                    label: this.$t('Mint'),
                    url: '/home/mint'
                }, {
                    label: this.$t('NFT'),
                    url: ''
                }, {
                    label: this.$t('Invite'),
                    url: '/home/inv'
                }, {
                    label: this.$t('User'),
                    url: '/my'
                }, {
                    label: this.$t('Trade'),
                    url: ''
                },{
                    label: this.$t('Market'),
                    url: ''
                },

            ]
        }
    },
    created() {
    },
    methods: {
        starts(){},
        to(url){
            if(url){
                this.$router.push(url)
            }else {
                this.show = false
                this.$toast.fail(this.$t('No NFT yet'))
            }
        },
        open(url){
            window.location.href = url
        }
    }

}
</script>

<style lang="less" scoped>
.head {
    position: relative;
    z-index: 999;
  padding: 12px;
  .flex-between();

  & > :nth-child(1) {
    .flex-row();

    .menu {
      img {
        width: 32px;
        height: 32px;
      }
    }

    .logo {
      img {
        width: 103px;
        height: 32px;
        margin-left: 12px;
      }
    }
  }

  & > :nth-child(2) {
    .flex-row();

    .lang {
      img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }
    }

    .address {
      width: 106px;
      height: 32px;
      border-radius: 10px;
      //border: 1px solid rgba(255, 255, 255, 0.2);
      box-sizing: border-box;
        background: #0b353f99;
        backdrop-filter: blur(12px);
      .flex-center();
      color: rgba(255, 255, 255, 1);
      font-family: Poppins;
      font-size: 13px;
      line-height: 18px;
    }
  }
}

.popup {
  width: 100vw;
  height: 100vh;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  background: rgba(9, 12, 20, 0.4);
  backdrop-filter: blur(18px);
  padding: 20px;

  .right {
    display: flex;
    align-items: center;

    .headLogo {
      margin-right: 7px;
      width: 36px;
      height: 36px;
    }

    .head-2 {
      width: 164px;
      height: 33px;
    }
  }

  .closr {
    img {
      width: 32px;
      height: 32px;
    }
  }
    h1{
        margin: 24px ;
        color: rgba(255, 241, 204, 1);
        font-family: Outfit;
        font-weight: 500;
        font-size: 32px;
    }
    .icon{
        display: flex;
        margin-top: 66px;
        img{
            width: 32px;
            height: 32px;
            margin-left: 28px;
        }
    }
}

</style>
